<template>
  <div class="home">
    <!-- <vant/> -->
    <van-search
      v-model="value"
      placeholder="请输入搜索关键词"
      disabled
      @click="$router.push('/home/searchpopup').catch((err) => {})"
    />
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="skyblue">
      <van-swipe-item v-for="item in banner" :key="item.id" loop>
        <img :src="item.image_url" alt="" style="width: 100%" />
      </van-swipe-item>
    </van-swipe>
    <!-- <transition name="slide">
      <router-view/>
    </transition> -->
    <!--van-slide-right van-slide-up这些是vant的style内置样式-->
    <transition name="van-slide-right">
      <router-view />
    </transition>
    <grid :channel="channel" @toChannel="Channel"></grid>
    <!-- 面试题：页面出现弹出框，弹出框中出现底层页面的内容，怎么处理 -->

    <transition name="van-fade">
      <div class="homeBigbox">
        <!-- brand -->
        <div class="text" v-show="$route.path === '/home'">
          <div class="brand">
            <div class="brand_title">品牌制造商直供</div>
            <ul>
              <li v-for="item in brandList" :key="item.id">
                <h4>{{ item.name }}</h4>
                <p>￥ {{ item.floor_price | priceFilter }} 元</p>
                <img :src="item.pic_url" alt />
              </li>
            </ul>
          </div>
        </div>
        <!-- 周四新发 -->
        <div class="new">
          <div class="title">周一周四·新品首发</div>
          <div class="box">
            <products :goodsList="newArr"></products>
          </div>
        </div>
        <!-- hot -->
        <div class="hot">
          <div class="title">人气推荐</div>
          <div class="box">
            <products :goodsList="hotGoodsList"></products>
          </div>
        </div>
        <!-- topic -->
        <topic :topicList="topicList"></topic>
        <div class="new" v-for="item in categoryList" :key="item.id">
          <div class="title">{{ item.name }}</div>
          <div class="box">
            <products :goodsList="item.goodsList"></products>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
// @ is an alias to /src
// import vant from '@/components/vant.vue'
import products from "@/components/products/products.vue";
import { indexData } from "@/request/api";
import grid from "@/components/homeCom/grid.vue";
import topic from "@/components/homeCom/topic.vue";

export default {
  components: {
    // vant
    grid,
    topic,
    products,
  },
  data() {
    return {
      value: "",
      banner: [],
      channel: [],
      topicList: [],
      brandList: [],
      newArr: [],
      hotGoodsList: [],
      categoryList: [],
    };
  },
  created() {
    indexData().then((res) => {
      console.log(res.data.categoryList);
      this.banner = res.data.banner;
      this.channel = res.data.channel;
      this.topicList = res.data.topicList;
      this.brandList = res.data.brandList;
      this.newArr = res.data.newGoodsList;
      this.hotGoodsList = res.data.hotGoodsList;
      this.categoryList = res.data.categoryList;
    });
  },
  methods: {
    Channel(id) {
      this.$router.push("/channel?id=" + id);
    },
  },
};
</script>

<style scoped lang="less">
.home {
  padding-bottom: 0.6rem;
}
.my-swipe .van-swipe-item {
  // color: #fff;
  // font-size: 20px;
  // line-height: 150px;
  // text-align: center;
  background-color: #fff;
}
.homeBigbox {
  background-color: #eee;
}
// vue原生的过度效果
.slide-enter,
.slide-leave-to {
  right: -100%;
}
.slide-enter-active,
.slide-leave-active {
  transition: all 0.5s;
}
.slide-enter-to,
.slide-leave {
  right: 0;
}
.brand {
  background: #fff;
  margin-top: 10px;
  .brand_title {
    text-align: center;
    height: 50px;
    line-height: 50px;
  }
  ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    li {
      width: 49.5%;
      height: 126px;
      margin-bottom: 5px;
      position: relative;
      h4 {
        font-weight: normal;
        position: absolute;
        left: 5%;
        top: 10px;
        margin: 0;
      }
      p {
        position: absolute;
        left: 5%;
        top: 30px;
        color: darkred;
        font-size: 14px;
      }
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.new,
.hot {
  background: #fff;
  margin: 10px 0;
  .title {
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
  }
  .box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}
</style>

